import { setInterval } from 'core-js';
import * as echarts from 'echarts';
import { autoHover } from './echartsAutoToolTip';
export const pieOption = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    var labelData1 = [];

    for (var i = 0; i < 50; ++i) {
        labelData1.push({
            value: 1,
            name: i,
            itemStyle: {
                normal: {
                    color: 'rgba(0,209,228,0)',
                }
            }
        });
    }
    for (var i = 0; i < labelData1.length; ++i) {
        if (labelData1[i].name < 50) {
            labelData1[i].itemStyle = {
                normal: {
                    color: '#464451',
                },

            }
        }
    }
    let option = {
        title: [{
            text: '0200',
            x: '50%',
            top: 'middle',
            textAlign: 'center',
            textStyle: {
                fontSize: '20',
                fontWeight: '100',
                color: '#fff',
                textAlign: 'center',
            },
        }, {
            text: '已占停车位',
            left: '50%',
            top: '52%',
            textAlign: 'center',
            textStyle: {
                fontSize: '16',
                fontWeight: '100',
                color: '#fff',
                textAlign: 'center',
            },
        }, {
            text: 'PARHNG',
            left: '50%',
            top: '65%',
            textAlign: 'center',
            textStyle: {
                fontSize: '10',
                fontWeight: '100',
                color: '#fff',
                textAlign: 'center',
            },
        },],
        polar: {
            radius: ['85%', '95%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
            startAngle: 0,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,

            },
            axisTick: {
                show: false
            },
        },
        series: [{
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 100,
            showBackground: true,
            backgroundStyle: {
                color: 'transparent',
            },
            data: [25],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: "#f19922",
                }
            }
        },
        {
            type: 'pie',
            z: 1,
            data: labelData1,
            radius: ['85%', '95%'],
            zlevel: -2,
            itemStyle: {
                normal: {
                    borderColor: '#1f1e26',
                    borderWidth: 1,
                }
            },
            label: {
                normal: {
                    position: 'inside',
                    show: false,
                }
            },
        },




        ]
    };
    myechart.setOption(option)
}
export const elasticOutOption = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    var xAxisData = [];
    var data1 = [];
    if (obj.isSafe) {
        for (var i = 0; i < 20; i++) {
            xAxisData.push('A' + i);
            data1.push({ value: -(Math.abs(Math.sin(i / 5) * (i / 5 - 10) + i / 6)) * 5, itemStyle: { color: i % 2 > 0 ? '#535960' : '#44a9ba' } })
        }
    } else {
        for (var i = 0; i < 100; i++) {
            xAxisData.push('A' + i);
            data1.push({ value: -(Math.abs(Math.sin(i / 5) * (i / 5 - 10) + i / 6)) * 5 })
        }
    }

    let option = {
        xAxis: {
            show: false,
            data: xAxisData,
            splitLine: {
                show: false
            },
            axisTick:{
                show: false
            },
            axisLabel: {
                show: false
            },
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '2%',
        },
        yAxis: {
            show:false,
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
        },
        series: [
            {
                name: 'bar',
                type: 'bar',
                data: data1,
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#fff'
                    },
                },
                animationDelay: function (idx) {
                    return idx * 10;
                }
            },
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
            return idx * 5;
        }
    };
    myechart.setOption(option)
    function loop() {
        var data2 = []

        for (let i = 0; i < 20; i++) {
            data2.push({ value: -(Math.abs(Math.sin(i / 5) * (i / 5 - 10) * Math.random() + i / 6)) * 5, itemStyle: { color: i % 2 > 0 ? '#535960' : '#44a9ba' } })
        }
        option.series[0].data = data2
        myechart.setOption(option)
    }
    if (obj.isSafe) {
        var time = null
        if (time) {
            clearInterval()
        }
        setInterval(() => {
            if (myechart) {
                myechart.clear()
                loop()
            }
        }, 3000)
    }

}
export const containLabelOption = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    var echartData = [
        { name: "空闲", fulname: 'FREE', data: [53] },
        { name: "预定", fulname: 'BOOKED', data: [33] },
        { name: "占用", fulname: 'BUSY', data: [14] }
    ];


    var option = {
        grid: {
            containLabel: true,
            left: 20,
            right: 40,
            top: 20,
            bottom: 20,
        },
        tooltip: {
            show: false,
        },
        legend: {
            show: false,
        },
        xAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
        yAxis: {
            data: ["sss"],
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        color: [
            "#717576",
            "#e8e7ea ",
            "#e69b2f",
            "#EF6B6E",
            "#7F6AAD",
            "#585247",
        ],
        series: [],
    }

    echartData.forEach((item, index) => {
        option.series.push({
            type: "bar",
            name: item.name,
            stack: "1",
            label: {
                normal: {
                    show: true,
                    position: [40, -15],
                    formatter: `{value|${item.data}%}\n\n{name|${item.name}}\n{fulname|${item.fulname}}`,
                    align: "left",
                    textStyle: {
                        color: "#fff",
                        rich: {
                            name: {
                                fontSize: "12",
                                fontWeight: 500,
                                color: "#fff",
                            },
                            fulname: {
                                fontSize: "12",
                                fontWeight: 500,
                                color: "#fff",
                            },
                            value: {
                                fontSize: "12",
                                fontWeight: 500,
                                color: "#fff",
                            },
                        },
                    },
                },
            },
            barWidth: 5,
            data: item.data,
            itemStyle: {
                normal: {
                    barBorderRadius: [0],
                },
            },
        });
        if (index === 0) {
            option.series[index].itemStyle.normal.barBorderRadius = [
                5,
                0,
                0,
                5,
            ];
        } else if (index === echartData.length - 1) {
            option.series[index].itemStyle.normal.barBorderRadius = [
                0,
                5,
                5,
                0,
            ];
        } else {
            return;
        }
    });
    myechart.setOption(option)
}
export const placeOption = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    let dataPie2 = [{
        name: '空闲',
        value: 60
    },
    {
        name: '占用',
        value: 40
    },
    {
        name: '占用',
        value: 20
    },

    ];
    let dataColor2 = [{
        os1: '#F89212',
        os2: '#F89212',
    },
    {
        os1: '#717578',
        os2: '#717578'
    },
    {
        os1: '#e2dd3e',
        os2: '#e2dd3e'
    },

    ];
    let legendData = [],
        seriesData = [],
        radiusValue = 90, total = 0;

    dataPie2.forEach(function (val, idx, arr) {
        total += val.value;
    })
    for (var i = 0; i < dataPie2.length; i++) {
        legendData.push(dataPie2[i].name);
        seriesData.push({
            type: 'pie',
            clockWise: false, //饼图的扇区是否是顺时针排布
            radius: [radiusValue - 30 * i + '%', radiusValue - 30 * i + 1 + '%'],
            center: ['50%', '50%'],
            label: {
                normal: {
                    show: false //隐藏引导线标识
                }
            },
            startAngle: 150 * i, //起始角度
            data: [{ //透明伞形
                value: total - dataPie2[i].value,
                tooltip: {
                    show: false
                },
                itemStyle: { //设置透明伞形
                    normal: {
                        color: '#fff',//伞形颜色
                        borderWidth: 10,
                        borderColor: '#242c2b',
                        label: {
                            show: false
                        },

                    },

                }
            },
            {
                value: dataPie2[i].value,
                name: dataPie2[i].name,

                itemStyle: {
                    normal: {
                        borderWidth: 10,
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: dataColor2[i].os1,
                        }, {
                            offset: 1,
                            color: dataColor2[i].os2,
                        }]),
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: dataColor2[i].os1
                        }, {
                            offset: 1,
                            color: dataColor2[i].os2
                        }])
                    }
                }
            },

            ]
        });


    }
    var option = {
        tooltip: {
            trigger: 'item',
            show: true,
            formatter: "{b} : <br/>{d}%",
            backgroundColor: 'rgba(0,0,0,0.7)', // 背景
            padding: [8, 10], //内边距
            extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        },
        series: seriesData
    };
    myechart.setOption(option)
}
export const lineOption = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    let color = [
        "#cf9321",
        "#322d20",
        "#FFC005",
        "#FF515A",
        "#8B5CFF",
        "#00CA69"
    ];
    let echartData = [{
        name: "1",
        value1: 100
    },
    {
        name: "2",
        value1: 138
    },
    {
        name: "3",
        value1: 350
    },
    {
        name: "4",
        value1: 173,
        value2: 180
    },
    {
        name: "5",
        value1: 180
    },
    {
        name: "6",
        value1: 150
    },
    {
        name: "7",
        value1: 180
    },
    {
        name: "8",
        value1: 230
    }
    ];

    let yAxisData1 = echartData.map(v => v.value1);
    const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
    }

    var option = {
        color: color,
        grid: {
            top: 10,
            bottom: 0,
            left: 0,
            right:0,
            containLabel: true
        },
        xAxis: [{
            type: "category",
            boundaryGap: false,
            show: false
        }],
        yAxis: [{
            type: "value",
            show: false
        }],
        series: [{
            name: "2018",
            type: "line",
            smooth: true,
            symbolSize: 0,
            zlevel: 3,
            lineStyle: {
                normal: {
                    color: hexToRgba(color[0], 0.1)
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                            offset: 0,
                            color: color[0]
                        },
                        {
                            offset: 1,
                            color: hexToRgba(color[0], 0.1)
                        }
                        ],
                        false
                    )
                }
            },
            data: yAxisData1
        }]
    };
    myechart.setOption(option)
}
export const getbarOption = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    var xData2 = ["A区", "B区", "C区", "D区"];
    var data1 = [250, 100, 130, 200];
    var data2 = [400, 200, 300, 300];
    var barWidth = 30;
    var option = {
        tooltip: {
            trigger: 'item',
        },
        grid: {
            top: 30,
            left: 10,
            bottom: 50
        },
        xAxis: {
            data: xData2,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                },
                margin: 26, //刻度标签与轴线之间的距离。
            },
        },
        yAxis: {
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            }
        },
        series: [{ // 上半截柱子
            name: '2019',
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            z: 0,
            label: {
                show: true,
                position: 'right',
                fontSize: 10,
                color: '#fff',
                formatter: function (item) {
                    return `${item.data / 10}%\n\n${item.data}`
                },
            },
            itemStyle: {
                color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,164,41,.3)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(255,164,41,.16)' // 100% 处的颜色
                    }], false)
                },
                opacity: .7,
            },
            data: data2
        },
        { //下半截柱子
            name: '2020',
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            itemStyle: { //lenged文本
                opacity: .7,
                color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF9A22' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#FFD56E' // 100% 处的颜色
                    }], false)
                }
            },
            data: data1
        },
        { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
            type: 'bar',
            barWidth: barWidth,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
                color: 'transparent'
            },
            data: data1
        },
        { //上半截柱子顶部圆片
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [barWidth, 15],
            "symbolOffset": [0, -5],
            "z": 12,
            label: {
                show: true,
                position: 'top',
                fontSize: 10,
                color: '#fff',
                formatter: function (item) {
                    return `空闲车位`
                },
            },
            "symbolPosition": "end",
            itemStyle: {
                color: 'rgba(255,164,41,.1)',
                opacity: 1,
            },
            "data": data2
        },
        { //下半截柱子顶部圆片
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [barWidth, 15],
            "symbolOffset": [0, -10],
            "z": 12,
            itemStyle: {
                opacity: 1,
                color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF9A22' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#FFD56E' // 100% 处的颜色
                    }], false)
                }
            },
            "symbolPosition": "end",
            "data": data1
        },
        { //下半截柱子底部圆片
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [barWidth, 15],
            "symbolOffset": [0, 5],
            "z": 12,
            itemStyle: {
                opacity: 1,
                color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF9A22' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#FFD56E' // 100% 处的颜色
                    }], false)
                }
            },
            "data": [1, 1, 1, 1]
        },
        {
            name: '第一圈',
            type: 'pictorialBar',
            symbolSize: [47, 16],
            symbolOffset: [0, 11],
            z: 11,
            stack: '广告',
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: '#3ACDC5',
                    borderWidth: 2
                }
            },
            data: [1, 1, 1, 1]
        }, {
            name: '第二圈',
            type: 'pictorialBar',
            symbolSize: [62, 22],
            symbolOffset: [0, 17],
            z: 10,
            stack: '广告',
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: "#02c3f1",
                    borderWidth: 2
                }
            },
            data: [1, 1, 1, 1]
        },
        ]
    };
    myechart.setOption(option)
}
export const getPieEchart = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    var value = 0.54;
    var option = {
        polar: {
            radius: ['70%', '94%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            startAngle: 180,
            max: 100,
            clockwise: false,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [
            {
                type: 'pie',
                backgroundColor: '#fff',
                radius: '60%',
                z: 1,
                center: ['50%', '50%'],
                startAngle: 90,
                amplitude: 20,
                data: [
                    0.4,

                    {
                        itemStyle: {
                            normal: {
                                color: "rgba(80,150,224,0.1)"
                            }
                        },
                    },
                ],
                color: '#25ba4c',
                backgroundStyle: {
                    borderWidth: 1,
                    color: 'transparent',
                },
                label: {
                    normal: {
                        show: false,
                        formatter: '',
                    },
                },
            },
            {
                name: '',
                type: 'bar',
                roundCap: true,
                z: 2,
                startAngle: 60,
                showBackground: true,
                backgroundStyle: {
                    color: '#3F546B',
                },
                data: [75],
                coordinateSystem: 'polar',
                itemStyle: {
                    normal: {
                        color: '#fff',
                    },
                },
            },
        ],
    };
    myechart.setOption(option)
}
export const coordinateSystem = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    var option = {
        title: obj.title,
        angleAxis: {
            show: false,
            max: 100, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 0, //极坐标初始角度
            splitLine: {
                show: false,
            },
        },
        grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            containLabel: true
        },
        barMaxWidth: obj.series ? 1 : 5, //圆环宽度
        radiusAxis: {
            show: false,
            type: 'category',
        },
        //圆环位置和大小
        polar: {
            center: ['50%', '50%'],
            radius: obj.series ? '140%' : '150%',
        },
        series: [
            {
                type: 'bar',
                stack: '测试',
                data: [
                    {
                        //上层圆环，显示数据
                        value: 68,
                        name: 'sdfasdf',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: obj.color1,
                                },
                                {
                                    offset: 1,
                                    color: obj.color,
                                },
                            ]),
                        },
                    },
                ],
                barGap: '-100%', //柱间距离,上下两层圆环重合
                coordinateSystem: 'polar',
                roundCap: true, //顶端圆角从 v4.5.0 开始支持
                z: 2,
            },
            {
                //下层圆环，显示最大值
                type: 'bar',
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            color: 'rgba(255,255,255,0.2)'
                        },
                    },
                ],
                barGap: '-100%',
                coordinateSystem: 'polar',
                roundCap: true,
                z: 1,
            }
        ],
    };
    if (!obj.series) {
        option.series.push({
            stack: '纯色小圆点',
            type: 'bar',
            data: [0.01],
            showBackground: false,
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 6,
            itemStyle: {
                color: obj.color,
                borderColor: obj.color,
                borderWidth: 5,
                shadowColor: obj.color,
                shadowBlur: 10,
                shadowOffsetY: 3,
            },
        })
    }
    myechart.setOption(option)
}
export const barBorderRadius = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    var option = {
        tooltip: {
            trigger: 'axis',
            show: false,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        legend: {
            show: false
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: 0,
            top: 0,
            containLabel: true
        },
        xAxis: [{
            splitLine: {
                show: false
            },
            type: 'value',
            show: false,
        }],
        yAxis: [{
            splitLine: {
                show: false
            },
            axisLine: { //y轴
                show: false
            },
            type: 'category',
            axisTick: {
                show: false
            },
            inverse: true,
            data: ['接机厅A', '联系服务区', '接机厅B', '值机处', '地面通道', '安检处', '托运处'],
            axisLabel: {
                color: '#9ba0a1',
                fontSize: 6,
            }
        }, {
            splitLine: {
                show: false
            },
            postion: 'right',
            axisLine: { //y轴
                show: false
            },
            type: 'category',
            axisTick: {
                show: false
            },
            inverse: true,
            data: [400, 380, 360, 340, 320, 300, 280],
            axisLabel: {
                color: '#9ba0a1',
                fontSize: 6,
                formatter: function (value, index) {
                    return value / 4 + '%'
                },
            }
        }],
        series: [{
            zlevel: 1,
            name: '标准化',
            type: 'bar',
            barWidth: 5, // 柱子宽度
            itemStyle: {
                barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）

                color: 'rgb(130, 139, 140)', // 渐变
            },
            data: [400, 380, 360, 340, 320, 300, 280]
        },
        {
            name: '',
            type: 'bar',
            barWidth: 5,
            barGap: '-100%',
            data: [400, 400, 400, 400, 400, 400, 400],
            itemStyle: {
                normal: {
                    barBorderRadius: [20, 20, 20, 20],
                    color: 'rgb(33,42,48)',
                    //width:"100%",
                    fontSize: 10,
                    //barBorderRadius: 30,
                },
            },
        },
        ]
    };
    myechart.setOption(option)
}
export const lineOptions = (obj) => {
    let myechart = echarts.init(document.getElementById(obj.id))
    let xLabel = ['0', '1', '2', '3', '4', '5']
    let goToSchool = ["40", "60", "22", "85", "50", "40"]
    let goOutSchool = ["20", "50", "12", "65", "30", "60"]

    var option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'transparent',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(126,199,255,0)' // 0% 处的颜色
                        }, {
                            offset: 0.5,
                            color: 'rgba(126,199,255,1)' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(126,199,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
            formatter: (p) => {
                let dom = `<div style="width: 79px;
	height: 50px;;color:#fff;position: relative;">
        <svg style="position: absolute;top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="71" viewBox="0 0 84 55">
      <defs>
        <style>
          .cls-1 {
            fill: #07172c;
            fill-opacity: 0.8;
            stroke: #a7d8ff;
            stroke-linejoin: round;
            stroke-opacity: 0.2;
            stroke-width: 1px;
            fill-rule: evenodd;
          }

        </style>
      </defs>
      <path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
        transform="translate(-258.5 -592.5)" />
    </svg>
        <div style="padding: 4px 8px 4px 14px;display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;position: relative;z-index: 1;">
            <div style="margin-bottom: 4px;width:100%;display:${p[0] ? 'flex' : 'none'};justify-content:space-between;align-items:center;">
                <span style="font-size:14px;color:#7ec7ff;">${p[0] ? p[0].seriesName : ''}</span>
                <span style="font-size:14px;color:#fff;">${p[0] ? p[0].data : ''}</span>
            </div>
            <div style="width:100%;height:100%;display:${p[1] ? 'flex' : 'none'};justify-content:space-between;align-items:center;">
                <span style="font-size:14px;color:#7ec7ff;">${p[1] ? p[1].seriesName : ''}</span>
                <span style="font-size:14px;color:#fff;">${p[1] ? p[1].data : ''}</span>
            </div>
        </div>
    </div>`
                return dom
            }
        },
        grid: {
            top: '10%',
            left: '5%',
            right: '25%',
            bottom: '25%',
            // containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: false
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#7ec7ff',
                    padding: 2,
                    fontSize: 10
                },
                formatter: function (data) {
                    return data + 'h'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    color: '#497a9f'
                },
            },
            axisTick: {
                show: false,
            },
            data: xLabel
        }],
        yAxis: [{
            name: '',
            min: 0,
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#192a44'
                },
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#7ec7ff',
                    padding: 16,
                    fontSize: 14
                },
                formatter: function (data) {
                    return data
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '上学',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,163,223,1)", // 线条颜色
                },
                borderColor: 'rgba(0,0,0,.4)',
            },
            itemStyle: {
                color: "rgba(25,163,223,1)",
                borderColor: "#646ace",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            data: goToSchool
        }, {
            name: '放学',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(10,219,250,1)", // 线条颜色
                },
                borderColor: 'rgba(0,0,0,.4)',
            },
            itemStyle: {
                color: "rgba(10,219,250,1)",
                borderColor: "#646ace",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            data: goOutSchool
        }]
    };
    myechart.setOption(option)
}